<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
			}

			.box {
				position: absolute;
				left: 0;
				width: 100px;
				height: 100px;
				background-color: red;
			}

			.line {
				position: absolute;
				top: 0;
				left: 800px;
				width: 1px;
				height: 800px;
				background-color: #000;
			}
		</style>
	</head>
	<body>
		<button class="btn1">向右移动</button>
		<button class="btn2">向左移动</button>
		<button class="btn3">向上移动</button>
		<button class="btn4">向下移动</button>
		<div class="box">

		</div>
		<div class="line">

		</div>

		<script src="./js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var box = document.getElementsByClassName('box')[0],
				btn1 = document.getElementsByClassName('btn1')[0],
				btn2 = document.getElementsByClassName('btn2')[0],
				btn3 = document.getElementsByClassName('btn3')[0],
				btn4 = document.getElementsByClassName('btn4')[0];

			btn1.addEventListener('click', function() {
				move(box, 'width', 800, 10, function() {
					move(box, 'height', 200, 10, function() {
						move(box, 'top', 0, 10, function() {

						})
					})
				});
			})

			btn2.addEventListener('click', function() {
				move(box, 'left', 0, 10);
			})

			btn3.addEventListener('click', function() {
				move(box, 'top', 0, 10);
			})

			btn4.addEventListener('click', function() {
				move(box, 'top', 800, 10);
			})

		</script>
	</body>
</html>
